;(function () {
  // 任务数据
  //   let arr = [
  //     {
  //       content: '今天要吃个大汉堡',
  //       done: false
  //     },
  //     {
  //       content: '复习本地存储的知识点',
  //       done: true
  //     },
  //     {
  //       content: '今天要吃定这个实战',
  //       done: false
  //     }
  //   ]

  // 获取元素
  let title = document.querySelector('#title')
  let todolist = document.querySelector('#todolist')

  // 数据驱动视图的做法

  // 步骤
  //  5. 本地存储
  let arr = localStorage.getItem('list')
    ? JSON.parse(localStorage.getItem('list'))
    : []
  //  1. 渲染功能
  // 封装利于回显
  dataList()
  function dataList () {
    todolist.innerHTML = ''
    for (let i = 0; i < arr.length; i++) {
      //判断是否完成
      if (arr[i].done) {
        todolist.innerHTML += `
            <li class="completed" data-index=${i}>
            <input type="checkbox" checked />
            <p>${arr[i].content}</p>
            <a href="javascript:;"></a>
          </li> 
            `
      } else {
        todolist.innerHTML += `
          <li data-index=${i}>
          <input type="checkbox" />
          <p>${arr[i].content}</p>
          <a href="javascript:;"></a>
        </li>
            `
      }
    }
  }
  //  2. 添加功能
  title.addEventListener('keyup', function (e) {
    //获取输入内容
    let val = title.value
    // console.log(e)
    if (!val) {
      alert('请输内容')
      return
    }
    if (e.code === 'Enter') {
      arr.unshift({
        content: val,
        done: false
      })
      //   console.log(arr)
      // 回车清空数据，存储本地
      title.value = ''
      localStorage.setItem('list', JSON.stringify(arr))
    }
    //数据回显
    dataList()
  })
  //  3. 删除功能
  todolist.addEventListener('click', function (e) {
    // 获取标识
    let index = e.target.parentNode.dataset.index
    // console.log(index)
    if (e.target.nodeName === 'A') {
      arr.splice(index, 1)
      localStorage.setItem('list', JSON.stringify(arr))
      dataList()
    }
    //  4. 切换功能
    if (e.target.type === 'checkbox') {
      // 将是否选取反
      arr[index].done = !arr[index].done
      localStorage.setItem('list', JSON.stringify(arr))
      dataList()
    }
  })
})()
